<section class="content-header" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
         xmlns:th="http://www.thymeleaf.org">
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li><a href="#">关联管理</a></li>
        <li class="active">关联详情</li>
    </ol>
</section>
<!-- Main content -->
<section class="content">
    <div class="jax-box">
        <form id="formSearch" class="form-horizontal form-search">
            <div class="form-group">
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="oddOrderId">订单编号:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="oddOrderId">

                    </div>
                </div>
                <div class="col-md-4 col-sm-6">
                    <label class="control-label  col-xs-4" for="oddProdId">产品编号:</label>
                    <div class="col-xs-8">
                        <input type="text" class="form-control" id="oddProdId">
                    </div>
                </div>
                <shiro:hasPermission name="orderLine:list">
                    <div class="col-md-1 col-sm-6 " style="text-align:left;">
                        <button type="button" id="btn_query" class="btn btn-info">查询</button>
                    </div>
                </shiro:hasPermission>
            </div>
        </form>
    </div>
    <div class="jax-box jax-box-table">
        <div id="toolbar" class="btn-group">

            <button id="btn_add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#userModal">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>新增
            </button>
            <button id="btn_batch_delete" type="button" class="btn btn-danger">
                <span class="glyphicon glyphicon-remove" aria-hidden="true"></span>批量删除
            </button>

        </div>
        <table id="table"></table>
    </div>
</section>
<!-- 用户新增模态框 -->
<div id="userModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <!--        user新增按钮页面-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">新增产品</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal" id="orderLineForm">
                    <div class="box-body">
                        <div class="form-group">
                            <label class="col-sm-3 control-label">订单编号 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="oddOrderId" class="form-control" min="1" require="必填项" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">产品编号 <span style="color: red">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="oddProdId" class="form-control" min="1" require="必填项" placeholder="">
                            </div>
                        </div>

                        <div class="form-group">
                            <label class="col-sm-3 control-label">数量 :<span style="color: #ff0000">*</span>:</label>
                            <div class="col-sm-8">
                                <input name="oddCount" type="text" class="form-control" min="1" require="必填项"
                                       placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">单位 :</label>

                            <div class="col-sm-8">
                                <input name="oddUnit" class="form-control" placeholder="">
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">价格 :</label>
                            <div class="col-sm-8">
                                <input name="oddPrice" class="form-control" placeholder="">
                            </div>
                        </div>
                    </div>
                    <div class="box-footer">
                        <div class="pull-right">
                            <button type="button" id="saveCustomer" class="btn btn-info">确定</button>
                            <button type="button" data-dismiss="modal" class="btn btn-default">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
<!-- 用户详情模态框-->
<div id="userDetailModal" class="modal fade" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">用户信息</h4>
            </div>
            <div class="modal-body">
                <div id="userOpenWindow">
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    var editFlag = "[[${@perms.hasPerm('orderLine:edit')}]]";
    var deleteFlag = "[[${@perms.hasPerm('orderLine:delete')}]]";
    // var assignRoleFlag="[[${@perms.hasPerm('customer:assignRole')}]]";
    var orderLineIdStr;//批量用户id
    var roleIdStr;//分配的角色
    var selectRoleIds;
    var customerIdChecked;
    var loadRoleCount = 0;
    var columns = [
        {checkbox: true},
        {
            field: 'oddOrderId',
            title: '订单编号',
            align: "center"
        }, {
            field: 'oddProdId',
            title: '产品编号',
            align: "center"
        },
        {
            field: 'oddCount',
            title: '数量',
            align: "center"
        },
        {
            field: 'oddUnit',
            title: '单位',
            align: "center"
        },
        {
            field: 'oddPrice',
            title: '价格',
            align: "center"
        },
        // {
        //     field: 'prodStatus',
        //     title: '状态',
        //     align: "center"
        // },
        {
            field: 'operation',
            title: '操作',
            align: "center",
            formatter: function (value,
                                 row, index) {
                var edit = editFlag == "true" ? '<a class="table-btn table-btn-info" href="javascript:void(0)" onclick="editUser(' + row.oddId + ')">编辑</a>' : '';
                // var assign = assignRoleFlag=="true"  ? '<a class="table-btn table-btn-info"  href="javascript:void(0)" onclick="assignRoleList('+row.customerId+')">分配角色</a>':'';
                var del = deleteFlag == "true" ? '<a  class="table-btn table-btn-danger" href="javascript:void(0)" onclick="deleteUser(' + row.oddId + ')">删除</a>' : '';
                return edit + del;
            }
        }];
    var options = {
        id: "#table",
        url: '/orderLine/list',
        columns: columns,
        // toolbar: '#toolbar',
        showRefresh: true,
        queryParams: queryParams
    }
    Core.initTable(options);

    /*查询用户参数*/
    function queryParams(params) {
        var temp = { //这里的键的名字和控制器的变量名必须一致，这边改动，控制器也需要改成一样的
            limit: params.limit, //页面大小
            offset: params.offset, //页码
            oddOrderId: $("#oddOrderId").val(),
            oddProdId: $("#oddProdId").val(),
        };
        // console.log(1,temp.stId)
        return temp;
    }

    /*查询角色参数*/
    function queryRoleParams(params) {
        var temp = {
            oddId: customerIdChecked
        };
        return temp;
    }

    // /*编辑*/
    function editUser(oddId) {
        Core.load("#userOpenWindow", "/orderLine/edit?oddId=" + oddId, function () {
            $("#userDetailModal").modal("show");
        }, 2);
    }
    //
    /*删除*/
    function deleteUser(oddId) {
        Core.confirm("确定删除该商品？", function () {
            Core.postAjax("/orderLine/delete", {"oddId": oddId}, function (data) {
                if (data.status == 200) {
                    Core.refreshTable("#table");
                    layer.msg(data.msg);
                }else{
                    layer.msg(data.msg);
                }
            }, "get")
        })
    }

    $(function () {
        /*查询*/
        $("#btn_query").click(function () {
            Core.refreshTable("#table");
        });
        //
    });
    //增加
    $("#btn_add").click(function () {
        Core.clearError("#orderLineForm");
    });
    // /*批量删除*/
    $("#btn_batch_delete").click(function () {
        var checkedRows = Core.selectMutiData("#table");
        if (checkedRows) {
            Core.confirm("确定删除选中的" + checkedRows.length + "条记录？", function () {
                orderLineIdStr = "";
                $.each(checkedRows, function (i, item) {
                    orderLineIdStr += (item.oddId + ",");
                })
                orderLineIdStr = orderLineIdStr.substring(0, orderLineIdStr.length - 1);
                Core.postAjax("/orderLine/batch/delete", {"orderLineIdStr": orderLineIdStr}, function (data) {
                    if (data.status == 200) {
                        Core.refreshTable("#table");
                    }
                    layer.msg(data.msg);
                }, "get")
            })
        }
    });


    // /*保存用戶*/
    $("#saveCustomer").click(function () {
        if (doValidForm(orderLineForm)) {
            Core.mask("#saveCustomer");
            Core.postAjax("/orderLine/add", $("#orderLineForm").serialize(), function (data) {
                Core.unmask("#saveCustomer");
                if (data.status == 200) {
                    $("#userModal").modal("hide");
                    $("#orderLineForm")[0].reset();
                    Core.refreshTable("#table")
                }
                layer.msg(data.msg);
            })
        };
    });
</script>